<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Responsive Navigation Menu using Twitter Bootstrap 3">
<meta name="author" content="Priyadarshini">


<title>Navbar Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<!-- <link href="https://dl.dropboxusercontent.com/u/96099766/FullWidthModalPopup/css/bootstrap.min.css" rel="stylesheet"> -->
<%-- <link type="text/css" rel="stylesheet" href="<c:url value ='/ressources/css/framework/bootstrap/bootstrap.min.css'/>" /> --%>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript" src="ressources/js/framework/bootstrap/bootstrap.min.js"></script> -->


<!-- Custom styles for this template 
    <link href="http://getbootstrap.com/examples/navbar/navbar.css" rel="stylesheet"> -->


<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<style type="text/css">
.dropdown-menu {
	background-color: #222222
}

.dropdown-menu>li>a {
	color: #999999
}

.navbar .dropdown-menu {
	margin-top: 0px;
}

/* MAKE TOP NAVBAR NOT COLLAPSE
-------------------------------------------------- */
#topNav .navbar-collapse .collapse {
	display: block !important;
}

#topNav .navbar-nav>li, .navbar-nav {
	float: left !important;
}

#topNav .navbar-nav.navbar-right:last-child {
	margin-right: -15px !important;
}

#topNav .navbar-right {
	float: right !important;
}

/* 
-------------------------------------------------- */

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Declare heights because of positioning of img element */
.carousel .item {
	height: 300px;
	background-color: #555;
}

#topNav {
	margin-bottom: 0.2px;
}



.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
</style>
</head>

<body>



	<div class="row">
	<!--       Static navbar -->
	<div id="topNav" class="hidden-xs navbar navbar-inverse main-nav" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting"> <img src="/img/transparent-white-logo.png">
				</a>
				<!--             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button> -->
			</div>
			<div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<!--                 <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span> Assane <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Settings</a></li>
                            <li><a href="#">Help</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Sign out</a></li>
                        </ul>
                    </li>
                     -->
						<li>
							<div class="navbar-form form-inline" role="form">
								<div class="form-group">
									<div class="btn-group">
										<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle navbar-btn">
											<span class="glyphicon glyphicon-user"></span> Assane <span class="caret"></span>
										</button>
										<ul class="dropdown-menu">
											<li><a href="#">Settings</a></li>
											<li><a href="#">Help</a></li>
											<li class="divider"></li>
											<li><a href="#">Sign out</a></li>
										</ul>

									</div>
								</div>
							</div>
						</li>

					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Carousel
================================================== -->
	<div id="myCarousel" class="hidden-xs carousel slide">
		<!-- Indicators -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
			<div class="item active">
				<img src="/assets/example/bg_suburb.jpg" class="img-responsive">
				<div class="container">
					<div class="carousel-caption">
						<h1>Bootstrap 3 Carousel Layout</h1>
						<p></p>
						<p>
							<a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
						</p>
					</div>
				</div>
			</div>
			<div class="item">
				<img src="http://carrapide.com/xibar/wp-content/uploads/2014/09/Microsofts-education-project-in-Senegal..jpg" class="img-responsive" width="100%">
				<div class="container">
					<div class="carousel-caption">
						<h1>Changes to the Grid</h1>
						<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
						<p>
							<a class="btn btn-large btn-primary" href="#">Learn more</a>
						</p>
					</div>
				</div>
			</div>
			<div class="item">
				<img src="http://placehold.it/1500X500" class="img-responsive">
				<div class="container">
					<div class="carousel-caption">
						<h1>Percentage-based sizing</h1>
						<p>With "mobile-first" there is now only one percentage-based grid.</p>
						<p>
							<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- Controls -->
		<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span>
		</a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span>
		</a>
	</div>
	<!-- /.carousel -->

		<div class="col-sm-12">
			<div class="row">

				

				<div class="col-sm-8 col-sm-offset-2">
<!-- 					<div class="container"> -->
						<!-- Static navbar -->
						<div class="navbar navbar-inverse" role="navigation" id="secondNavBar">
							<div class="container-fluid">
								<div class="navbar-header">
									<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
										<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
									</button>
								</div>
								<div class="navbar-collapse collapse">
									<ul class="nav navbar-nav">
										<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>


										<li><a href="#">Actualités</a></li>
										<li><a href="#">Espace Proffesseurs</a>
<%-- 											<ul class="dropdown-menu">
																<li><a href="<c:url value ='/ajouterEleve'/>">Ajouter nouvel élève</a></li>
												<li><a href="<c:url value ='/listeEleves'/>">Afficher la liste des élèves</a></li>
											</ul></li> --%>
										<li><a href="#">Espace Parents</a></li>
										<li><a href="#">Espace Eleves</a></li>
										<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a>
											<ul class="dropdown-menu">
												<li><a href="#">Personal Membership</a></li>
												<li><a href="#">Premium Membership</a></li>
											</ul></li>
										<li><a href="#">Gallery</a></li>
										<li><a href="#">Contact</a></li>
									</ul>
								</div>
								<!--/.nav-collapse -->
							</div>
							<!--/.container-fluid -->
						</div>
<!-- 					</div> -->
					<!--  /container -->

				</div>
				<!--  /col-sm-8 -->

			</div>
			<!--  /row -->
		</div>
		<!--  /col-sm-12 -->
	</div>


	<br>
	
	<script type="text/javascript">
		$(document).ready(function() {
	$('#secondNavBar li').click(function(e) {
    $('#secondNavBar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }

});
	
		});
		
		</script>
		
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
<!-- 	<script type="text/javascript" src="ressources/js/framework/jquery/jquery-1.11.1.min.js"></script> -->
	<!-- 	<script src="https://dl.dropboxusercontent.com/u/96099766/FullWidthModalPopup/js/bootstrap.min.js"></script> -->
<!-- 	<script type="text/javascript" src="ressources/js/framework/bootstrap/bootstrap.min.js"></script> -->
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<%-- 	<script src="<c:url value ='/ressources/js/ie10-viewport-bug-workaround.js'/>"></script> --%>


</body>
</html>